@font-face {
			font-family: 'Museo Cyrl 100';
			src: url('fonts/MuseoCyrl-100.eot');
			src: url('fonts/MuseoCyrl-100.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-100.woff2') format('woff2'),
				url('fonts/MuseoCyrl-100.woff') format('woff'),
				url('fonts/MuseoCyrl-100.ttf') format('truetype'),
				url('fonts/MuseoCyrl-100.svg#MuseoCyrl-100') format('svg');
			font-weight: 200;
			font-style: normal;
		}
		
@font-face {
			font-family: 'Museo Cyrl 500';
			src: url('fonts/MuseoCyrl-500Italic.eot');
			src: url('fonts/MuseoCyrl-500Italic.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-500Italic.woff2') format('woff2'),
				url('fonts/MuseoCyrl-500Italic.woff') format('woff'),
				url('fonts/MuseoCyrl-500Italic.ttf') format('truetype'),
				url('fonts/MuseoCyrl-500Italic.svg#MuseoCyrl-500Italic') format('svg');
			font-weight: normal;
			font-style: italic;
		}
		
@font-face {
			font-family: 'Museo Cyrl 300';
			src: url('fonts/MuseoCyrl-300Italic.eot');
			src: url('fonts/MuseoCyrl-300Italic.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-300Italic.woff2') format('woff2'),
				url('fonts/MuseoCyrl-300Italic.woff') format('woff'),
				url('fonts/MuseoCyrl-300Italic.ttf') format('truetype'),
				url('fonts/MuseoCyrl-300Italic.svg#MuseoCyrl-300Italic') format('svg');
			font-weight: 300;
			font-style: italic;
		}
		
@font-face {
			font-family: 'Museo Cyrl 700';
			src: url('fonts/MuseoCyrl-700Italic.eot');
			src: url('fonts/MuseoCyrl-700Italic.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-700Italic.woff2') format('woff2'),
				url('fonts/MuseoCyrl-700Italic.woff') format('woff'),
				url('fonts/MuseoCyrl-700Italic.ttf') format('truetype'),
				url('fonts/MuseoCyrl-700Italic.svg#MuseoCyrl-700Italic') format('svg');
			font-weight: 600;
			font-style: italic;
		}
		
		@font-face {
			font-family: 'Museo Cyrl 300';
			src: url('fonts/MuseoCyrl-300.eot');
			src: url('fonts/MuseoCyrl-300.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-300.woff2') format('woff2'),
				url('fonts/MuseoCyrl-300.woff') format('woff'),
				url('fonts/MuseoCyrl-300.ttf') format('truetype'),
				url('fonts/MuseoCyrl-300.svg#MuseoCyrl-300') format('svg');
			font-weight: 300;
			font-style: normal;
		}
		
@font-face {
			font-family: 'Museo Cyrl 900';
			src: url('fonts/MuseoCyrl-900.eot');
			src: url('fonts/MuseoCyrl-900.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-900.woff2') format('woff2'),
				url('fonts/MuseoCyrl-900.woff') format('woff'),
				url('fonts/MuseoCyrl-900.ttf') format('truetype'),
				url('fonts/MuseoCyrl-900.svg#MuseoCyrl-900') format('svg');
			font-weight: bold;
			font-style: normal;
		}
		
@font-face {
			font-family: 'Museo Cyrl 900';
			src: url('fonts/MuseoCyrl-900Italic.eot');
			src: url('fonts/MuseoCyrl-900Italic.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-900Italic.woff2') format('woff2'),
				url('fonts/MuseoCyrl-900Italic.woff') format('woff'),
				url('fonts/MuseoCyrl-900Italic.ttf') format('truetype'),
				url('fonts/MuseoCyrl-900Italic.svg#MuseoCyrl-900Italic') format('svg');
			font-weight: bold;
			font-style: italic;
		}
		
@font-face {
			font-family: 'Museo Cyrl 500';
			src: url('fonts/MuseoCyrl-500.eot');
			src: url('fonts/MuseoCyrl-500.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-500.woff2') format('woff2'),
				url('fonts/MuseoCyrl-500.woff') format('woff'),
				url('fonts/MuseoCyrl-500.ttf') format('truetype'),
				url('fonts/MuseoCyrl-500.svg#MuseoCyrl-500') format('svg');
			font-weight: normal;
			font-style: normal;
		}
		
@font-face {
			font-family: 'Museo Cyrl 700';
			src: url('fonts/MuseoCyrl-700.eot');
			src: url('fonts/MuseoCyrl-700.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-700.woff2') format('woff2'),
				url('fonts/MuseoCyrl-700.woff') format('woff'),
				url('fonts/MuseoCyrl-700.ttf') format('truetype'),
				url('fonts/MuseoCyrl-700.svg#MuseoCyrl-700') format('svg');
			font-weight: 600;
			font-style: normal;
		}
		
@font-face {
			font-family: 'Museo Cyrl 100';
			src: url('fonts/MuseoCyrl-100Italic.eot');
			src: url('fonts/MuseoCyrl-100Italic.eot?#iefix') format('embedded-opentype'),
				url('fonts/MuseoCyrl-100Italic.woff2') format('woff2'),
				url('fonts/MuseoCyrl-100Italic.woff') format('woff'),
				url('fonts/MuseoCyrl-100Italic.ttf') format('truetype'),
				url('fonts/MuseoCyrl-100Italic.svg#MuseoCyrl-100Italic') format('svg');
			font-weight: 200;
			font-style: italic;
		}
		
/*  */

@font-face {
	font-family: 'Harmonia Sans Pro Cyr';
	src: url('fonts/HarmoniaBureauSansProCyr.eot');
	src: url('fonts/HarmoniaBureauSansProCyr.eot?#iefix') format('embedded-opentype'),
		url('fonts/HarmoniaBureauSansProCyr.woff2') format('woff2'),
		url('fonts/HarmoniaBureauSansProCyr.woff') format('woff'),
		url('fonts/HarmoniaBureauSansProCyr.ttf') format('truetype'),
		url('fonts/HarmoniaBureauSansProCyr.svg#HarmoniaBureauSansProCyr') format('svg');
	font-weight: bold;
	font-style: normal;
}

::-webkit-scrollbar {  width: 5px;  } 
::-webkit-scrollbar-thumb {  background:#f0f0f0;  } 
::-webkit-scrollbar-track {  background:transparent;  }

* {  font-family: 'Museo Cyrl 100';  }
html, body {  width: 100%; height: 100%; margin:0; padding:0; background:#fff;  }
h2 {  display:block; position:relative; left:0px; width:calc(100% - 0px); margin:0 0 70px 0; font-family: 'Museo Cyrl 300'; font-size: 45px; text-align:left;  }
ul {  display:block; position:relative; margin:0; padding:0; list-style:none;  }
ul li {  display:block; position:relative; margin:0; padding:0; list-style:none;  }
input, textarea {  outline:none;  }

section.block-section {  display:block; position:relative; top:0; left:0%; width:100%;  }
div.divider {  display:block; position:relative; width:100%; height:1px; margin:70px 0; background:#e0e0e0;  }

/* ---------------------------------------------------- */
/* .slider.carousel – start */
.slider.carousel {
	display: block;
	position: relative;
	left: 0%;
	width: 100%;
	height:1 00%;
	margin: 0;
	}
.slider.carousel section.slides-container {
	display:block;
	position:relative;
	top:0;
	left:0;
	width:100%;
	height:100%;
	overflow: hidden;
	}
.slider.carousel .line {
	display: block;
	position: relative;
	left:0;
	height: 100%;
	white-space: nowrap;
	}
.slider.carousel .line .single-slide  {
	display: inline-block;
	position: relative;
	width:100%;
	height: 100%;
	}
.slider.carousel .l,
.slider.carousel .r  {
	display: block;
	position: absolute;
	top: 50%;
	width: 30px;
	height: 100px;
	margin-top: -50px;
	cursor:pointer;
	background-image: url(../img/slider-arrow.png);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	z-index:1;
	}
.slider.carousel .l {
	left: 20px;
	transform: rotate(180deg);
	-webkit-transform: rotate(180deg);
	}
.slider.carousel .r {
	right: 20px;
	}
/* .slider.carousel – end */
/* ---------------------------------------------------- */

/* // #start-screen */
#start-screen {
	height: 100%;
	min-height: 650px;
	background: #000;
}
#start-screen .slider {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.video-cover {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	overflow: hidden;
}
.video-cover iframe {
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}
#start-screen .client,
#start-screen .name {
	display: block;
	position: absolute;
	font-size: 35px;
	color: #fff;
}
#start-screen .client:hover,
#start-screen .name:hover {
	color: #fffabb;
}
#start-screen .client {
	bottom: 150px;
	left: 100px;
	font-family: 'Museo Cyrl 500';

}
#start-screen .name {
	bottom: 100px;
	left: 100px;
	font-family: 'Museo Cyrl 100';
}
#start-screen .overlay {
	position: absolute;
	top:0;
	left:0;
	width: 100%;
	height: 150px;
	background: -moz-linear-gradient(top, rgba(0,0,0,1) 0%, rgba(0,0,0,0) 100%);
	background: -webkit-linear-gradient(top, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#000000', endColorstr='#00000000',GradientType=0 );
}
#start-screen .logo {
	display: block;
	position: absolute;
	top: 40px;
	left: 50px;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 16px;
	text-decoration: none;
	color: #fff;
}
#start-screen .slogan {
	display: none;
	position: absolute;
	top: 50px;
	left: 350px;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 16px;
	text-decoration: none;
	color: #fff;
}
#start-screen .phone {
	display: block;
	position: absolute;
	top: 50px;
	right: 350px;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 16px;
	text-decoration: none;
	color: #fff;
}
#start-screen .btn {
	position: absolute;
	top: 30px;
	right: 120px;
	padding: 15px 30px;
	border: 3px solid #fff;
	cursor: pointer;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 16px;
	color: #fff;
}
@media screen and (max-width:1280px){
	#start-screen .logo { left: 100px; }
	#start-screen .slogan {
		left: 100px;
		top: 120px;
	}
	#start-screen .phone  {
		right: 120px;
		font-size: 20px;
		line-height: 20px;
	}
	#start-screen .btn {
		top: 90px;
	}
}
@media screen and (max-width:850px){
	#start-screen .logo {
		left: 50%;
		width: 210px;
		margin: 0 0 0 -105px;
	}
	#start-screen .slogan {
		top: 120px;
		left: 50%;
		width: 320px;
		margin:  0 0 0 -160px;
		font-size: 21px;
		line-height: 32px;
		text-align: center;
	}
	#start-screen .client {
		left: 20px;
		width: calc(100% - 40px);
		font-size: 18px; 
		text-align: center;
	}
	#start-screen .name {
		left: 20px;
		width: calc(100% - 40px);
		font-size: 28px;
		text-align: center;
	}
}
@media screen and (max-width:450px){
	#first-screen [src*=logo] {
		top: 40px;
		left: 50px;
		width: 150px;
		margin-left: 0;
	}	
}

/* #start-screen // */

.block-section.message {
	left: 50%;
	width: 1280px;
	margin: 0 0 0 -640px;
	padding-top: 50px;
}
@media screen and (max-width:1420px) {
	.block-section.message {
		left: 50px;
		width: calc(100% - 100px);
		margin-left: 0;
	}
}
@media screen and (max-width:700px) {
	.block-section.message {
		left: 20px;
		width: calc(100% - 40px);
		margin-left: 0;
	}
}

/*full window video*/
.video {  position:relative; top:0; left:0%; width:100%; height:675px; margin:0; padding:0; background-color:#000; background-image:url('blocks/video-1/img/loading.gif'); background-size:auto auto; background-position:center center; background-repeat:no-repeat; overflow:hidden;  }
.video .video-container {  position:absolute; top:0; left:0; width:100%; height:100%; margin:0; padding:0; overflow:hidden; background:url(../video/poster.jpg); background-size:cover; background-position:center center; opacity:1; transition:.5s; -webkit-transition:.5s;  }
[data-overlay=yes] .video-container {  opacity:0.3;  }
#first-screen {  perspective: 1500px; -webkit-perspective: 1500px;  }
#first-screen h1 {  display: block; position: absolute; top: 50%; left: 100px; width: 1000px; margin: -45px 0 0 0px; font-family: 'Harmonia Sans Pro Cyr'; font-size: 35px; letter-spacing: 0.05em; line-height: 45px; text-align: left; text-transform: lowercase; color: #fff;  }
#first-screen h1 span.smaller {  font-family: 'Harmonia Sans Pro Cyr'; font-size: 25px; line-height: 35px;  }
#first-screen .button {  display: block; position: absolute; top: 50%; left: 100px; width: 250px; margin: 100px 0 20px 0px; padding: 20px 0; border: 3px solid #fff; font-family: 'Harmonia Sans Pro Cyr'; font-size: 16px; color: #fff; text-align: center; cursor: pointer;
	border-radius: 3px; -moz-border-radius: 3px; -o-border-radius: 3px; -webkit-border-radius: 3px;
	transition:.5s; -webkit-transition:.5s;  }
#first-screen .button:hover {  background:#fff; color:#000;  }
#first-screen [src*=logo] {  display: block; position: absolute; top: 50px; left: 100px; margin: 0;  }
@media screen and (max-width:600px) {
	#first-screen [src*=logo] {  top: 40px; left: 50px;  }
	#first-screen h1 {  left: 50px; width: calc(100% - 100px); margin-top: -65px; text-align: center;   }
	#first-screen .button {  left:50%; margin-top:70px; margin-left:-178px; width: 356px;  font-size: 28px;  }
	}
@media screen and (max-width:550px) {
	#first-screen h1 {  font-size: 21px; line-height: 32px; text-transform: uppercase;  }
	#first-screen h1 span.smaller {  font-size: 16px;  }
	#first-screen .button {  width: 210px; margin-left: -108px; font-size: 18px;  }
	}


/*example video*/
#next-project {  
	position: relative;
	height: 100%;
	background-color: #000;
	-webkit-transition:.7s .1s ease-in; 
	transition:.7s .1s ease-in; 
	z-index: 1; 
	overflow: hidden;
	cursor:pointer;
}
#next-project .bg {  
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url();
	background-size: cover !important;
	background-position: center center !important;
	filter: blur(30px) grayscale(1);
	-webkit-filter: blur(30px) grayscale(1);
	transition:.7s .1s ease-in; 
	-webkit-transition:.7s .1s ease-in;
	opacity:0.5  
	}
#next-project:hover .bg {  
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-image: url();
	background-size: cover;
	background-position: center center;
	filter: blur(5px) grayscale(0);
	-webkit-filter: blur(5px) grayscale(0);
	opacity:0.5  
	}
#next-project .video-container {  opacity: 0.5;  }
#next-project h1 {  display: block; position: absolute; top: 100px; left: 0px; width: 100%; margin: 0px 0 0 0px; font-family: 'Harmonia Sans Pro Cyr'; font-size: 32px; line-height: 30px; letter-spacing: 0.05em; text-align: center; color: #fff; cursor:pointer; 
	transition:.7s .1s ease-in; -webkit-transition:.7s .1s ease-in;  }
#next-project h1 span.smaller {  display: block; margin:0 0 0px 0; font-family: 'Harmonia Sans Pro Cyr'; font-size: 23px; line-height: 50px;  }
#next-project:hover {  transform: scale(0.9); -webkit-transform: scale(0.9);  }
#next-project:hover .video-container {  opacity: 0.1;  }
#next-project:hover h1 {  color: #dbffa8; transform: scale(1.3); -webkit-transform: scale(1.3);  }

/*decode message*/
#decode-message {  padding: 100px 0 0; background:#fff;  }
#decode-message .text {  display: block; position: relative; top: 0; margin: 0 0 0 0; font-family: 'Museo Cyrl 100'; font-size: 23px; line-height: 41px;  }
ul.price.nav {
	position: relative;
	top: 0;
	left: 0px;
	width: 100%;
	height: 50px;
	margin: 0 0 30px 0;
	text-align: left;
	}
ul.price.nav li {  
	display: inline-block;
	position: relative;
	width: auto;
	background: #ffffff;
	border: 2px solid rgba(62, 62, 72, 0.08);
	font-family: 'Museo Cyrl 500';
	font-size: 15px;
	color: #3e3e48;
	border-radius: 100px;
	-moz-border-radius: 100px;
	-o-border-radius: 100px;
	-webkit-border-radius: 100px;
	transition:.3s;
	-webkit-transition:.3s;
	cursor: pointer;
	} 
ul.price.nav li:before {
	content: "+";
	display: block;
	position: absolute;
	left: -15px;
	top: 11px;
	font-family: 'Museo Cyrl 700';
	font-size: 12px;
	opacity:0;
	transition:.3s;
	-webkit-transition:.3s;
	}
ul.price.nav li:first-child:before {
	display:none;
	}
ul.price.nav li:hover {
	background: #cee8a7;
	border-color: #cee8a7;
	color: #000;
	}
ul.price.nav li:hover:before {
	opacity:0.2;
	color: #000;
	}
ul.price.nav li.active {
	background: #fff;
	border: 3px solid #000;
	font-size: 18px;
	color: #000;
	cursor: default;
	}
ul.price.nav li.active:before {
	opacity:1 !important;
	color:#000;
	}
ul.price.nav [data-status='0']{
	margin: 0 17px 0px 0 !important;
	padding: 9px 21px;
	border-right-width:3px !important;
	border-left-width:3px !important;
	border-radius:100px;
	-moz-border-radius:100px;
	-o-border-radius:100px;
	-webkit-border-radius:100px;
	}
ul.price.nav [data-status='0']:before {
	left: -15px;
	top: 11px;
	font-size: 12px;
	}
ul.price.nav [data-status='1']{
	margin: 0 0px 0px 0 !important;
	padding: 9px 28.5px;
	border-right-width:0px !important;
	border-left-width:3px !important;
	border-radius:100px 0 0 100px;
	-moz-border-radius:100px 0 0 100px;
	-o-border-radius:100px 0 0 100px;
	-webkit-border-radius:100px 0 0 100px;
	}
ul.price.nav [data-status='1']:before {
	left: -15px;
	top: 11px;
	font-size: 12px;
	}
ul.price.nav [data-status='2']{
	margin: 0 17px 0px 0 !important;
	padding: 9px 21px;
	border-right-width:3px !important;
	border-left-width:0px !important;
	border-radius:0 100px 100px 0;
	-moz-border-radius:0 100px 100px 0;
	-o-border-radius:0 100px 100px 0;
	-webkit-border-radius:0 100px 100px 0;
	}
ul.price.nav [data-status='2']:before {
	left: -10px;
	top: 8px;
	font-size: 15px;
	}
ul.price.nav [data-status='3']{
	margin: 0 0px 0px 0 !important;
	padding: 9px 28.5px;
	border-right-width:0px !important;
	border-left-width:0px !important;
	border-radius:0;
	-moz-border-radius:0;
	-o-border-radius:0;
	-webkit-border-radius:0;
	}
ul.price.nav [data-status='3']:before {
	left: -10px;
	top: 8px;
	font-size: 15px;
	}
ul.price-description {
	display: block;
	position: relative;
	top: 0;
	left: 0px;
	width: calc(100% - 0px);
	font-family: 'Museo Cyrl 100';
	font-size: 18px;
	line-height: 28px;
	}
ul.cost {
	display: inline-block; 
	position: relative; 
	top: 0; 
	left: 0px; 
	width:calc(100% - 0px);
	margin:50px 0 0;
	font-family: 'Museo Cyrl 100'; 
	font-size: 23px; 
	line-height: 41px;
	}	
ul.cost li {
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 42px;
	}
ul.cost li .roobl-sign {
	display: inline-block;
	width:18px;
	border-bottom:3px solid #000;
	line-height: 12px
	}
ul.cost li .open-request-popup {
	display: block;
	position: absolute;
	top: 0;
	left: 100%;
	margin: -15px 0 0 50px;
	padding: 3px 30px;
	border: 4px solid #000;
	box-sizing: border-box;
	cursor: pointer;
	font-size: 18px;
	font-weight: 300;
	transition: .3s;
	-webkit-transition: .3s;
	}
ul.cost li .open-request-popup:hover {
	background: #000;
	color: #fff;
	}
#decode-message .open-request-popup {
	position: relative;
	margin: 30px 0 0 0;
	border-bottom: 2px solid #000;
	cursor: pointer;
	}
#decode-message .select-type-in-portfolio {
	display: inline-block;
	border-bottom: 2px dashed #000;
	cursor: pointer;
	line-height: 34px;
	color: #000;
	}
#decode-message .select-type-in-portfolio:hover {
	border-bottom: 2px dashed #736f9f;
	color: #736f9f;
	}
@media screen and (max-width:1000px) {
	#decode-message {  margin-bottom: 50px; padding: 50px 0; border-bottom: 1px solid #f0f0f0;  }
	#decode-message .text {  font-size: 18px; line-height: 32px;  }
	}
@media screen and (max-width:600px) {
	.message h2 {  left:0px; margin: 0 0 30px 0;  }
	.price-and-description-container {  display: block; position: relative;  }
	ul.cost {  display: block; position: absolute; top:0; left: 0px; margin: 0; padding: 0;  }
	ul.price-description {  padding: 140px 0 0 0;  }
	#decode-message .text {  left: 0px; width: calc(100% - 0px); font-size: 16px; line-height: 25px; text-align: justify;  }
	ul.price-description {  left: 0px !important; width: calc(100% - 0px); font-size: 16px; line-height: 25px; text-align: justify;  }
	ul.price.nav,
	ul.cost {  left: 0px; width: calc(100% - 0px);  }
	ul.price.nav {  left: 20px; height: auto !important;  }
	ul.price.nav li {  display: block; margin: 0 0 10px 0 !important;padding:0 !important; border: 0 !important; font-size: 21px; color: #b3b3b3;  }
	ul.price.nav li.active {  margin: 0 0 10px 0 !important; font-size:21px;  }
	ul.price.nav li.active:before {  display:block !important; left: -21px; top: 0px; font-size: 21px !important;  }
	ul.price.nav [data-status='0'] {  margin: 0 5px 10px 0 !important; padding: 3px 7px; border-right-width: 2px !important; border-left-width: 2px !important;  }
	ul.cost .open-request-popup { 
		position: relative !important;
		top: 0 !important;
		left: 0 !important;
		margin: 20px 0 !important;
		margin-top: 20px !important;
		margin-right: 0px !important;
		margin-bottom: 20px !important;
		margin-left: 0px !important;
		width: 100% !important; 
		}
	}

/*example video*/
#example-video {  position:relative; top:0; height: 100% !important; transition:.7s .1s ease-in; -webkit-transition:.7s .1s ease-in; z-index:1;  }
#example-video.scrolled {  top:-100%; transform:scale(0.9); -webkit-transform:scale(0.9);  }
#example-video h1 {  display: block; position: absolute; bottom: 100px; left: 100px; width: auto; margin: 0px 0 0 0px; font-family: 'Harmonia Sans Pro Cyr'; font-size: 23px; line-height: 30px; letter-spacing: 0.05em; text-align: left; color: rgba(46, 46, 46, 1);  }
#example-video h1 span.smaller {  display: block; margin:0 0 20px 0; font-family: 'Harmonia Sans Pro Cyr'; font-size: 32px; line-height: 50px;  }
@media screen and (max-width:450px) {
	#example-video h1 {  left:50px;  }
	}

/*example comment*/
#example-comment {
	left: 50%;
	width: 1280px;
	margin: 0 0 0 -640px;
	padding:50px 0 50px; 
	transition:.7s .1s ease-in; 
	-webkit-transition:.7s .1s  ease-in;  
}
#example-comment h1 {
	position: relative;
	left: 0%;
	width: 900px;
	margin: 0 0 20px 0px;
	font-size: 48px;
	line-height: 70px;
}
#example-comment.scrolled {  padding:100px 0 100px;  }
#example-comment .text, 
#example-comment p {
	display: block;
	position: relative;
	top: 0;
	left: 0%;
	width: 900px;
	margin: 0 0 0 0px;
	padding: 30px 0;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 21px;
	line-height: 34px;
	letter-spacing: 0.06em;
}
#example-comment .img:hover {
	-webkit-transition: .3s;
	transform: .3s;
	-webkit-transform: scale(1.1);
	transform: scale(1.1);
	-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
	-moz-box-shadow: 0 0 50px rgba(0,0,0,0.8);
	-o-box-shadow: 0 0 50px rgba(0,0,0,0.8);
	box-shadow: 0 0 50px rgba(0,0,0,0.8)
	z-index: 1; 
}
#example-comment .img.full-width {
	width: 100%;
	height: 550px;
	background-size: cover !important;
	background-position: center center !important;
} 
#example-comment .img.half-width {
	display: inline-block;
	width: 50%;
	height: 550px;
	background-size: cover !important;
	background-position: center center !important;
	margin: -4px 0;
}
#example-comment iframe { margin-top: -10px; }
@media screen and (max-width:1366px) {
	#example-comment {
		left: 50px;
		width: calc(100% - 100px);
		margin-left: 0;
	}
}
@media screen and (max-width:1000px) {
	#example-comment h1,
	#example-comment p {
		width: 100%;
	}
	#example-comment h1 {
		font-family: 'Museo Cyrl 300';
		font-size: 35px;
		line-height: 55px;
	}
	#example-comment p {
		font-size: 18px;
		line-height: 28px;
	}
	#example-comment .img {
		height: auto !important;
		padding-top: 100%;
	}
	#example-comment .img.half-width {
		width: 100%;
	}
}
@media screen and (max-width:700px) {
	#example-comment {
		left: 20px;
		width: calc(100% - 40px);
		margin-left: 0;
	}
}

/*#services*/
#services  {
	left: 50%;
	width: 1280px;
	margin: 50px 0 30px -640px;
	padding-top: 50px;
	padding-bottom: 30px;
	background: #fff;
	z-index: 3;
}
#services .a-service.highlighted {
	display: table;
	position: relative;
	height: auto;
	min-height: 500px;
	margin-bottom: 30px;
	margin-top: 0;
	padding: 100px 300px;
	box-sizing: border-box;
	background-size: cover;
	background-position: center center;
}
#services .a-service.highlighted::after {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
#services .a-service {
	display: block;
	position: relative;
	left: 0%;
	width: 100%;
	margin: 50px 0 30px 0px;
	white-space: nowrap;
}
#services .a-service .preview {
	display: inline-block;
	vertical-align: middle;
	width: calc(50% - 20px);
	margin: 0 0 0 0;
	padding-top: 35%;
	background-size: cover;
	background-position: center center;
}
#services .a-service .description {
	display: inline-block;
	width: calc(50% - 20px);
	margin: 0 0 0 40px;
	vertical-align: middle;
	white-space: normal;
}
#services .a-service.left {
	left: 50%;
	width: 620px;
	margin-left: 0;
}
#services .a-service.left .preview {
	width: 100%;
	padding-top: 70%;
}
#services .a-service.left .description {
	width: calc(100% - 40px);
	margin-left: calc(-200%);
}
#services .a-service .title {
	display: block;
	position: relative;
	margin-bottom: 30px;
	white-space: normal;
	z-index: 1;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 48px;
}
#services .a-service .comment {
	display: block;
	position: relative;
	white-space: normal;
	z-index: 1;
	font-size: 18px;
	line-height: 30px;
}

#services .a-service.highlighted .row {
	display: table-row;
	height: 100%;
}
#services .a-service.highlighted .cell {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	color: #fff;
}
#services .a-service.highlighted .title {
	font-size: 60px;
	line-height: 60px;
	letter-spacing: 0.02em;
}
#services .a-service.highlighted .comment {
	font-size: 18px;
	line-height: 30px;
}

@media screen and (max-width:1420px) {
	#services { 
		width: 1080px !important; 
		margin-left: -540px !important;  
	}
	#services .a-service.highlighted {
		padding-right: 100px;
		padding-left: 100px;
	}
}
@media screen and (max-width:1280px) {
	#services { 
		width: 900px !important;   
		margin-left: -450px !important;  
	}
	#services .a-service .title {
		font-size: 32px !important; 
	}
	#services .a-service .comment{
		font-size: 16px !important; 
		line-height: 25px !important; 
	}
}
@media screen and (max-width:1080px) {
	#services { 
		left: 50px !important;   
		margin-left: 0 !important;   
		width: calc(100% - 100px) !important;     
	}
	#services .a-service {
		white-space: normal !important; 
	}
	#services .a-service .preview {
		width: 100% !important; 
		margin-bottom: 30px !important; 
		padding-top: 35% !important;  
	}
	#services .a-service .description {
		width: 100% !important; 
		margin-left: 0 !important; 
	}
	#services .a-service.highlighted {
		min-height: 0 !important; 
	}
	#services .a-service.left {
		left: 0 !important; 
		width: 100% !important; 
	}
}
@media screen and (max-width:700px) {
	#services { 
		left: 20px !important;     
		width: calc(100% - 40px) !important;     
	}
	#services .a-service.highlighted {
		padding: 50px 20px !important;    
	}
}

/* hww */
#hww-bg {
	display: none;
	position: fixed;
	top:50%;
	left: 30px;
	right: 30px;
	bottom: 50%;
	background: #00a559;
	z-index: -2;
	-webkit-transition: .5s;
	transition: .5s;
}
#hww-bg.visible {
	top: 30px;
	bottom: 30px;
}
#hww {
	display: block;
	position: relative;
	left: 0;
	width: 100%;
	z-index: -1;
	margin: 0 0 0 0px;
	padding-top: 500px;
	padding-bottom: 100px;
	background: #00a559;
	border: 0px solid #fff;
	box-sizing: border-box;
	color: #fff;
}
#hww h2 {
	display: block;
	position: fixed;
	top: 100px;
	left: 50%;
	margin: 0 0 0 -640px;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 45px;
	line-height: 45px;
}
#hww h3 {
	display: block;
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -160px;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 35px;
	line-height: 35px;
	opacity: 0.5;
}
#hww h3.fixed {
	position: fixed;
	cursor: pointer;
	/*-webkit-transition: .5s;
	transition: .5s;*/
}
#hww h3.fixed:hover {
	opacity: 1;	
}
#hww p {
	display: block;
	position: relative;
	left: 50%;
	width: 800px;
	margin-left: -160px;
	margin-bottom: 50px;
	font-family: 'Museo Cyrl 300';
	font-size: 23px;
	line-height: 35px;
}
#hww .number {
	display: none;
	position: fixed;
	top: 50%;
	left: 50%;
	margin: -250px 0 0 -640px;
	width: 480px;
	opacity: 1;
	font-size: 500px;
	line-height: 500px;
	text-align: center;
}
@media screen and (max-width: 1440px) {
	#hww h2,
	#hww h3.fixed {
		left: 50px;
		margin-left: 0;
		width: calc(50% - 100px);
	}
	#hww h3:not(.fixed),
	#hww p {
		width: calc(50% - 50px);
		margin-left: 0; 
	}
	#hww p {
		font-size: 18px;
		line-height: 28px;
	}
}
@media screen and (max-width: 1200px) {
	#hww h2 {
		top: 50px;
		left: 50px;
		margin-left: 0;
	}
}
@media screen and (max-width: 1000px) {
	#hww {
		padding: 50px;
	}
	#hww h2 {
		position: relative;
		top: 0;
		left: 0;
		width: 100%;
	}
	#hww h3.fixed,
	#hww .number {
		display: none !important;
	}
	#hww h3 {
		font-size: 28px;
	}
	#hww h3,
	#hww p {
		position: relative;
		top: 0 !important;
		padding-top: 0 !important;
		width: 100% !important;
		left: 0px !important;
	}
}
@media screen and (max-width: 700px) {
	#hww {
		padding-left: 20px;
		padding-right: 20px;	
	}
}

/*portfolio*/
#portfolio-new { margin-bottom: 0px; }
#portfolio-new h2 {
	left: 0;
	width: 100%;
	margin: 0 0 50px 0;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 41px;
	text-align: center;
	color: #fff;
}
#portfolio-new a { text-decoration: none; }
#portfolio-new .container { padding: 70px 0; }
#portfolio-new .container .list {
	width: 1280px;
	left: 50%;
	margin: 0 0 0 -640px;
}
#portfolio-new .container.grand { background: #2e2e2e; }
#portfolio-new .container.grand .a-case {
	display: inline-block;
	width: calc(50% - 15px);
	margin: 0 30px 0 0;
	vertical-align: top;
}
#portfolio-new .container.grand .a-case:nth-child(2n) { margin-right: 0; }
#portfolio-new .container .a-case img { 
	display: block;
	width: 100%;
	margin: 0 0 30px 0; 
}
#portfolio-new .container .a-case .preview { position: relative; }
#portfolio-new .container .a-case .preview::before {
	content: " ";
	display: block;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background: rgba(0,0,0,0.5);
}
#portfolio-new .container .a-case:hover .preview::before { background: rgba(0,0,0,0.0); }
#portfolio-new .container .a-case .preview::after {
	content: " ";
	display: block;
	position: absolute;
	top: 50%;
	left: 50%;
	width: 80px;
	height: 80px;
	margin: -40px 0 0 -40px;
	background-image: url('../img/sprite.png');
	background-repeat: no-repeat;
	background-position-x: -12px;
	background-position-y: -24px;
}
#portfolio-new .container .a-case:hover .preview::after { background-position-y: -104px; }
#portfolio-new .container .a-case .title,
#portfolio-new .container .a-case .client {
	display: block;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 21px;
	color: #fff;
}
#portfolio-new .container .a-case .title { margin: 0 0 20px 0; }
#portfolio-new .container .a-case .announcement,
#portfolio-new .container .a-case .name {
	display: block;
	font-size: 15px;
	line-height: 25px;
	color: #d1d1d1;
}
#portfolio-new .container .a-case .announcement { margin: 0 0 20px; }
#portfolio-new .container .a-case .more {
	color: #8a92bd;
}
#portfolio-new .container .a-case .more:hover {
	color: #a3acdf;
}

#portfolio-new .container.small { background: #232323; }
#portfolio-new .container.small .a-case {
	display: inline-block;
	width: calc(25% - 30px * 3 / 4);
	margin: 0 30px 0 0;
	vertical-align: top;
	text-align: center;
}
#portfolio-new .container.small .a-case:nth-child(4n) { margin-right: 0; }

@media screen and (max-width:1420px) {
	#portfolio-new .list { 
		width: 1080px !important; 
		margin-left: -540px !important;  
	}
}
@media screen and (max-width:1280px) {
	#portfolio-new .list { 
		width: 900px !important;   
		margin-left: -450px !important;  
	}
}
@media screen and (max-width:1080px) {
	#portfolio-new .list { 
		left: 50px !important;   
		margin-left: 0 !important;   
		width: calc(100% - 100px) !important;     
	}
	#portfolio-new .container.small { padding-bottom: 50px; } 
	#portfolio-new .container.small .a-case { width: calc(50% - 30px) !important; margin-bottom: 30px !important; }
	#portfolio-new .container.small .a-case:nth-child(2n) { margin-right: 0 !important; }
}
@media screen and (max-width:900px) {
	#portfolio-new .container.grand .a-case {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 50px !important;
	}
	#portfolio-new .container.grand .a-case:last-child { margin-bottom: 0px !important; }
}
@media screen and (max-width:700px) {
	#portfolio-new .list { 
		left: 20px !important;     
		width: calc(100% - 40px) !important;     
	}
	#portfolio-new .container.small .a-case { 
		width: 100% !important;
		margin-right: 0 !important;
	}
	#portfolio-new .container.small .a-case:last-child { 
		margin-bottom: 0 !important; 
	}
}

/*reviews*/
#reviews {  display:block; position:relative; top:0; left:0; width:100%; height:500px; margin:0; background:rgba(250, 250, 250, 1); overflow: hidden;  }
#reviews h2 {  display: block; position: relative; top:0;  left:0; width:100%; height: auto; margin:0; padding:50px 0 50px 0; font-size: 41px; line-height: 41px; text-align: center;  }
#reviews .left-quote,
#reviews .right-quote {  display:block; position:absolute; top:0px; left:50%; font-size:210px; color:#efefef; text-shadow:0 2px 1px #fff;  }
#reviews .left-quote {  margin: 50px 0 0 -600px; font-size: 350px;  }
#reviews .right-quote {  margin:210px 0 0 420px; display:none;  }
#reviews div.hr {  display:none; position:absolute; top:90px; left:50%; width:100px; height:2px; margin:0 0 0 -50px; background:#f0c405;  }
#reviews span.single-review {  display:block; position:absolute; top:150px; left:50%; width:600px; height:auto; margin:0 0 0 -450px; font-size:18px; font-weight:100; font-style:normal; line-height:23px; text-align:justify; color:#777777;  
	transition:0.5s; -webkit-transition:0.5s;
	}
#reviews img.photo {  display:block; position:absolute; top:0; left:50%; width:200px; height:auto; margin:120px 0 0 300px; border: 2px solid rgba(185, 185, 185, 0.33);
	border-radius: 100%; -moz-border-radius: 100%; -o-border-radius: 100%; -webkit-border-radius: 100%; 
	transition:0.5s; -webkit-transition:0.5s;
	}
#reviews .cell {  display:table-cell; width:100%; height:120px; vertical-align:middle; background:transparent; font-size:18px; line-height:32px; text-alighn:justify; color:#878787;  }
#reviews span.respondent {  display:block; position:absolute; top:370px; left:50%; width:200px; margin:0 0 0 300px; font-family: 'Museo Cyrl 700'; font-size:14px; letter-spacing:3px; font-weight:bold; text-align:center; text-transform:uppercase; color:#000;  
	transition:0.5s; -webkit-transition:0.5s;
	}
#reviews span.date {  display:block; position:absolute; top:395px; left:50%; width:200px; margin:0 0 0 300px; font-size:12px; line-height:21px; font-weight:100; text-align:center; text-transform:none; color:#9e9e9e;  
	transition:0.5s; -webkit-transition:0.5s;
	}
#reviews div.points {  display:none; position:absolute; bottom:35px; left:0; width:100%; height:auto; text-align:center;  }
#reviews div.passive-point,
#reviews div.active-point {  margin:0 7px; vertical-align:middle; 
	border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; -webkit-border-radius:100px;  
	transition:0.2s; -webkit-transition:0.2s;
	}
#reviews div.passive-point {  display:inline-block; position:relative; top:0; left:0; width:3px; height:3px; background:#666;  }
#reviews div.active-point {  display:inline-block; position:relative; top:0; left:0; width:6px; height:6px; background:#666;  }
#reviews div.line {  position:absolute; bottom:0; left:0; width:0%; height:5px; background:#f0c405;  
	border-radius:100px; -moz-border-radius:100px; -o-border-radius:100px; -webkit-border-radius:100px;
	transition:5s linear; -webkit-transition:5s linear;
	}
@media screen and (max-width:1366px) {
	#reviews {
		left: 0 !important;
		margin-left: 0 !important;
		width: 100% !important;
	}
}
@media screen and (max-width:1200px) {
	#reviews {
		padding-left: 50px;
		padding-right: 50px;
	}
	#reviews .main-phrase {
		font-size: 28px;
	}
}
@media screen and (max-width:1200px) {
	#reviews span.single-review {  top: 50px; margin: 0 0 0 -300px;  }
	#reviews .left-quote {  margin: -25px 0 0 -440px;  }
	#reviews img.photo {  width: 150px; margin: 290px 0 0 -300px;  }
	#reviews span.respondent {  margin: 0 0 0 100px; text-align: right;  }
	#reviews span.date {  margin: 0 0 0 100px; text-align: right;  }
	}
@media screen and (max-width:900px) {
	#reviews span.single-review {  width: calc(100% - 100px); top: 200px; left: 50px; margin: 0;  }
	#reviews .left-quote {  display:none;  }
	#reviews img.photo {  width: 120px; margin: 50px 0 0 -60px;  }
	#reviews span.respondent {  margin: 20px 0 0 -100px; text-align: center;  }
	#reviews span.date {  margin: 20px 0 0 -100px; text-align: center;  }
	}
@media screen and (max-width:700px) {
	#reviews {
		padding-left: 20px;
		padding-right: 20px;
	}
}
@media screen and (max-width:450px) {
	#reviews {  height: 600px;  }
	#reviews .cell {  font-size:12px; line-height:21px;  }
	#reviews span.respondent {  margin: 120px 0 0 -100px;  }
	#reviews span.date {  margin: 120px 0 0 -100px;  }
	}
	
/*faq*/
#faq {
	left: 50%;
	width: 1280px;
	margin: 0 0 50px -640px;
	padding-top: 50px;
	padding-bottom: 40px;
	border-bottom: 1px solid #f0f0f0;
}
#faq h2 {
	left: 0;
	width: 100%;
}
#faq .q {  position: relative; top:0; margin: 30px 0 20px 0; font-size: 25px; text-align: left;  }
#faq .a {  position: relative; top:0; margin: 0px 0 0px 0; padding:0; border-bottom: 1px solid #f0f0f0; font-size: 18px; line-height: 32px; text-align: left; color:#8b8b8b;  }
#faq .a:last-child {  border-bottom:0px;  }
@media screen and (max-width:1420px) {
	#faq {
		left: 50px;
		margin-left: 0;
		width: calc(100% - 100px);
	}
}
@media screen and (max-width:700px) {
	#faq {
		left: 20px;
		margin-left: 0;
		width: calc(100% - 40px);
	}
}
@media screen and (max-width:350px) {
	#faq h2 {
		font-size: 35px;
	}
}

/*we*/
#we {  left:50%; width:1280px; margin: 0 0 0 -640px; padding: 50px 0; background:#fff;  }
#we .text {  display: block; position: relative; top: 0; margin: 0 0 30px 0; padding: 0 0 70px 0; border-bottom: 3px solid #f0f0f0; font-family: 'Museo Cyrl 100'; font-size: 23px; line-height: 41px;  }
#we .thesis {  display: block; margin:0 0 0px 0; font-family: 'Museo Cyrl 500'; font-size: 28px; line-height: 38px;  }
#we h1 {  display: block; left:0; margin: 0px 0 30px 0; font-family: 'Museo Cyrl 500'; font-size: 41px; font-weight: 100; line-height: 61px; color:#000;  }
#we h2 {  display: block; left:0; margin: 70px 0 30px 0; font-family: 'Museo Cyrl 500'; font-size: 21px; font-weight: 100; line-height: 38px; color:#777;  }
#we ul.skills li {  display: inline-block; width: 33.333333%; vertical-align: top; margin: 0 0 30px 0; z-index:1; cursor:pointer;  }
#we ul.skills li:before {  content:""; display:block; position:absolute; top:50%; left:50%; width:0%; height:0%; z-index:-1; 
	background-color:#9094ce; background-image:url(../../../img/w-arrow.png); background-position: calc(100% - 50px) center; background-size: 50px auto; background-repeat: no-repeat;  }
#we ul.skills li:after {  content: attr(data-more-phrase); display:block; position:absolute; top:50%; left:30px; width:0%; height:0%; font-size: 25px; color:#fff; opacity:0; z-index:2;  }
#we ul.skills li .name {  display: block; margin: 0 0 20px 0; font-family: 'Harmonia Sans Pro Cyr'; font-size: 21px; line-height: 28px; letter-spacing: 1px; text-transform: lowercase;  }
#we ul.skills li .description {
	display: block;
	width: 90%;
	font-family: 'Museo Cyrl 300';
	font-size: 16px;
	line-height: 28px;
}

#we ul.skills li:hover .name {  padding:30px 0 0 30px; margin:0 0 -10px 0; color:#fff !important;  }
#we ul.skills li:hover .description {  opacity:0;  }
#we ul.skills li:hover:before {  left:0px; top:-20px; width:calc(100% + 0px); height:calc(100% + 40px);  }
#we ul.skills li:hover:after {  opacity:0;  }
#we ul.skills li:before,
#we ul.skills li:after,
#we ul.skills li .name,
#we ul.skills li .description {  transition:0.7s; -webkit-transition:0.7s;  }

#we ul.team li {  display:inline-block; width: 250px; height: 250px; margin:50px; background-size:cover; background-position: center center; 
	border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; -webkit-border-radius:50%; 
	transition:1s ease; -webkit-transition:1s ease;  }
#we ul.team li:before {  content:""; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:#c1c267; opacity:0;
	border-radius:50%; -moz-border-radius:50%; -o-border-radius:50%; -webkit-border-radius:50%; 
	transition:1s ease; -webkit-transition:1s ease;
	transform:scale(1.5); -webkit-transform:scale(1.5);  }
#we ul.team li:hover {  transform:rotate(0deg) scale(1.1); -webkit-transform:rotate(0deg) scale(1.1);  }
#we ul.team li:hover:before {  opacity:0.8;
	transform:scale(1); -webkit-transform:scale(1);  }
#we ul.team .name {  display: block; position: absolute; top: 70px; left: 0; font-family: 'Museo Cyrl 500'; font-size: 21px; color:#000; opacity:0; transition:1s ease; -webkit-transition:1s ease;  }
#we ul.team .position {  display: block; position: absolute; top: 100px; left: 0; font-family: 'Museo Cyrl 500'; font-size: 16px; color:#000; opacity:0; transition:1s ease; -webkit-transition:1s ease;  }
#we ul.team li:hover .name {  opacity:1; top: 20px;  }
#we ul.team li:hover .position {  opacity:1; top: 50px;  }
@media screen and (max-width:1420px) {
	#we {
		left: 50px;
		margin-left: 0;
		width: calc(100% - 100px);
	}
}
@media screen and (max-width:700px) {
	#we {
		left: 20px;
		margin-left: 0;
		width: calc(100% - 40px);
	}
}
@media screen and (max-width:700px) {
	#we h1 {  margin: 0px 0 10px 0; font-size:32px;  }
	#we .text {  width: 100%; margin: 0 0 30px 0; padding: 0 0 30px 0; font-size: 16px; line-height: 25px; text-align: justify;  }
	#we .thesis {  font-size: 18px; line-height: 28px;  }
	#we ul.skills li {  display: block; width: 100%;  }
	#we ul.skills li .name {  margin: 0 0 0px 0;  }
	#we ul.skills li .description {  width: 100%; font-size: 14px; line-height: 25px; color: #a2a2a2;  }
	#we ul.team {  text-align: center;  }
	#we ul.team li {  width: 200px; height: 200px; margin: 10px 0;  }
	#we ul.team li:before {  opacity:0.8; transform:scale(1); -webkit-transform:scale(1);  }
	#we ul.team li .name {  opacity:1; top: 20px;  }
	#we ul.team li .position {  opacity:1; top: 50px;  }
	}
@media screen and (max-width:450px) {
	#we ul.team li {  
		width: 100%;
		height: 250px;
		margin: 70px 0;
		border-radius: 0%; 
		-moz-border-radius: 0%; 
		-o-border-radius: 0%; 
		-webkit-border-radius: 0%;  
		}
	#we ul.team li:before {
		display:none;
		}
	#we ul.team li .name,
	#we ul.team li:hover .name {
		top: -90px;
		}
	#we ul.team li .position,
	#we ul.team li:hover .position {
		top: -60px;
		text-align: left;
		}
	}

/*project review*/
#project-review { 
	left: 50%;
	width: 1280px;
	margin: 0 0 50px -640px;
	padding: 50px 100px;
	box-sizing: border-box;
	background:#e3e8d0;  
}
#project-review .main-phrase {  font-family: 'Harmonia Sans Pro Cyr'; font-size: 38px; vertical-align: middle;  }
#project-review .mdash {  font-family: 'Harmonia Sans Pro Cyr'; font-size: 48px; vertical-align: middle;  }
#project-review .review {
	display: block;
	background: #fff;
	width: calc(100% - 100px);
	margin: 50px 0 0 0px;
	padding: 50px;
	font-family: 'Museo Cyrl 300';
	font-size: 18px;
	line-height: 32px;
	text-align: justify;
}
#project-review .name {  display: block; position:relative; margin: 30px 0 0 0; padding: 30px 0 0 0; font-family: 'Harmonia Sans Pro Cyr'; font-size: 16px;  }
#project-review .name:before {  display:block; position:absolute; top:0px; left:50%; width:70px; height:3px; margin:0 0 0 -35px; background:#000; content:"";  }
@media screen and (max-width:1366px) {
	#project-review {
		left: 0;
		margin-left: 0 ;
		width: 100% ;
	}
}
@media screen and (max-width:1200px) {
	#project-review {
		padding-left: 50px;
		padding-right: 50px;
	}
	#project-review .main-phrase {
		font-size: 28px;
	}
}
@media screen and (max-width:900px) {
	#project-review .review {  width: calc(100% - 100px); margin: 50px 0 0 0px;  }
	}
@media screen and (max-width:700px) {
	#project-review {  width: calc(100% - 0px); margin-bottom: 0; padding: 50px;  }
	#project-review .main-phrase {  font-size: 28px;  }
	#project-review .review {  width: calc(100% - 50px); margin: 50px 0 0 0px; padding: 25px; font-size: 16px; line-height: 25px;  }
	}

/*footer*/
#footer {  padding:50px 0; font-size: 18px; line-height: 38px; white-space: nowrap; text-align: center; color: #a5a5a5; background:#282828;  }
#footer .part {
	display: inline-block;
	width: calc(1280px / 4 - 200px / 3);
	margin: 0 50px 0 0;
	white-space: normal;
	text-align: left;
	vertical-align: top;
}
#footer .slogan {
	display: block;
	font-size: 16px;
	line-height: 28px !important;
	color: #707070;
}
#footer .part .title {  display: block; margin: 0 0 20px 0; font-family: 'Museo Cyrl 700'; font-size: 18px; letter-spacing: 2px; text-transform: uppercase; color:#fff;  }
#footer .button {  display: inline-block; border:3px solid #fff; margin-left: 170px; padding:5px 20px; color:#fff; cursor:pointer;  }
@media screen and (max-width:1420px) {
	#footer {  font-size: 16px;  }
	#footer .part {  width: calc(25% - 200px / 3);  }
	#footer .button { margin-left: calc(25% - 230px); } 
	}
@media screen and (max-width:950px) {
	#footer {  white-space: normal; line-height: 25px; text-align: center;  }
	#footer .part {  width: calc(100% - 50px); margin: 0 0 30px 0; padding: 0 0 30px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.24); text-align: center;  }
	#footer .button {  display: inline-block; position: relative; top:0; left:0; margin: 20px 0 0 0; padding: 14px 23px; font-size: 21px;  }
	}
@media screen and (max-width:450px) {
	#footer {  padding: 50px 0;  }
	}

/*map-1*/
.map-1-bg {
	padding: 50px 0;
	background: #fff;
}
#map-1 {
	width: 1280px;
	left: 50%;
	min-height: 500px;
	margin: 0 0 0px -640px;
	background: #fff;
}
#map-1 #map-canvas {  position:absolute; top:0%; left:530px; width:calc(100% - 530px); height:100%; margin:0; padding:0; background-color:#fff;  }
#map-1 .map-marker {  position:absolute; top:50%; left:50%; width:150px; margin:-125px 0 0 -38px;  }
#map-1 .overlay {  display:block; position:absolute; top:0; left:0; width:100%; height:100%;  }
#map-1 form {  display: block; position: absolute; top: 0; left: 0; width: 550px; height: calc(50% - 100px); margin: 0; padding: 0 50px 0 0; box-sizing: border-box;  }
#map-1 form .title {  display:block; margin:0 0 30px 0; font-family: 'Museo Cyrl 700'; font-size:32px;  }
#map-1 form input {  display: block; position: relative; width: 100%; height: auto; margin: 0; padding: 15px 0; border: 0; border-bottom: 3px solid #f7f7f7; font-family: 'Museo Cyrl 500'; font-size: 18px;  }
#map-1 form textarea {  display: block; position: relative; width: calc(100% - 40px); height: 100px; margin: 30px 0 0 0; padding: 20px 20px; border: 3px solid #f7f7f7; font-family: 'Museo Cyrl 500'; font-size: 18px;  }
#map-1 form input, #map-1 form textarea {  transition:.3s; -webkit-transition:.3s;  }
#map-1 form input:focus, #map-1 form textarea:focus {  border-color:#000;  }
#map-1 form .button {  display: inline-block; margin: 30px 0 0 0; padding: 20px 30px; background: #00a559; font-family: 'Museo Cyrl 500'; font-size: 18px; color: #fff;  }
#map-1 form .button.no {
	animation:footer_no_anim 0.7s ease-in-out;
	-webkit-animation:footer_no_anim 0.7s ease-in-out;
	}
@keyframes footer_no_anim {
	20% {margin-left: 50px;}
	40% {margin-left: -50px;}
	60% {margin-left: 25px;}
	80% {margin-left: -25px;}
	100% {margin-left: 0px;}
	}
@-webkit-keyframes footer_no_anim {
	20% {margin-left: 50px;}
	40% {margin-left: -50px;}
	60% {margin-left: 25px;}
	80% {margin-left: -25px;}
	100% {margin-left: 0px;}
	}
@media screen and (max-width:1420px) {
	#map-1 {
		left: 50px;
		margin-left: 0;
		width: calc(100% - 100px);
	}
	#map-1 form { width: calc(50% - 15px); }
	#map-1 #map-canvas { left: calc(50% + 15px); width: calc(50% - 15px); }
}
@media screen and (max-width:900px) {
	#map-1 form {  position: relative; width:100%; margin: 0;  }
	#map-1 #map-canvas {  position: relative; left:0%; width:100%; height: 300px; margin-bottom: 30px;  }
	}
@media screen and (max-width:700px) {
	#map-1 {
		left: 20px;
		margin-left: 0;
		width: calc(100% - 40px);
	}
}

@media screen and (max-width:450px) {
	#map-1 form {  position: relative; width:calc(100% - 50px); padding: 25px;  }
	#map-1 form .title {  margin: 0 0 30px 0; font-size: 21px;  }
	#map-1 form input {  font-size: 16px; padding: 10px 0;  }
	#map-1 form textarea {  font-size: 16px; padding: 10px; width: calc(100% - 24px);  }
	}
	
/*menu*/
#content {  position:relative; top:0; right:0; width:100%; height:auto; transition:0.5s; -webkit-transition:0.5s;  }
#content.menu-open {  right:300px !important;  } /*класс для смещения блоков контента страницы*/
#menu .menu-icon {  position:fixed; width: 30px; height:25px; top:50px; right: 50px; margin: 0 0 0 0px; cursor: pointer; z-index:1001;  }
#menu .menu-icon div {  position:absolute; width: 100%; height:3px; background:#8a8a8a; z-index:1001; cursor:pointer;   
	transition:0.5s; -webkit-transition:0.5s; }
#menu .menu-icon div:nth-child(1) {  top:0px;  }
#menu .menu-icon div:nth-child(2) {  top:10px;  }
#menu .menu-icon div:nth-child(3) {  top:20px;  }
#menu ul.items {  position:fixed; top:0; right:-800px; width: 800px; min-width: 200px; height:100%; background:#1f1f1f; z-index:1000;  
	transform: skew(0deg); -webkit-transform: skew(0deg);
	transition:0.5s; -webkit-transition:0.5s;  }
#menu ul.items li {  display: inline-block; width: calc(100% - 50px); height: auto; margin:0 0 20px 0; padding:0px 0 30px 50px; border-bottom: 0px dashed #393939; font-family: 'Museo Cyrl 100'; font-size: 21px; font-weight:100; color: #fff; cursor:pointer;  
	transition:0.5s; -webkit-transition:0.5s;  }
#menu ul.items li:hover {  color:#fafafa;  }
#menu ul.items li:nth-child(1) {  margin-top:50px;  }
#menu ul.open-items {  right: -300px;  }
#menu .contacts {
	border-top: 1px solid #313131;
	padding: 30px 50px 0;
}
#menu .phone {
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 21px;
	color: #fff;
	text-decoration: none;
}
#menu .btn {
	width: 180px;
	margin: 30px 0;
	padding: 15px 0;
	border: 3px solid #fff;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 18px;
	text-align: center;
	color: #fff;
}
@media screen and (max-width:500px) {
	#menu ul.items {  width:100%;  }
	#menu ul.open-items {  right:0;  }
	}
	
/*request window*/
#plenka {  display:none; position:fixed; top:0; left:0; width:100%; height:100%; margin:0; padding:0; background:rgba(0,0,0,0.9); z-index:1001; content:""; opacity:0; cursor:pointer;
	transition: 0.5s; -webkit-transition: 0.5s;
	transform: scale(0.8); -webkit-transform: scale(0.8);  }
#plenka.open {  opacity:1;
	transition: 0.5s; -webkit-transition: 0.5s; 
	transform: scale(1); -webkit-transform: scale(1);  }
#request-popup  {  display:none; position:fixed; top:50px; left:50%; width:530px; height:440px; margin:0 0 0 -265px; background:#fff; z-index:1001; text-align:center;
	transition: 0.5s; -webkit-transition: 0.5s;
	transform: scale(0); -webkit-transform: scale(0);
	border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px;  }
#request-popup.open {  top:50px; 
	transition: 0.5s; -webkit-transition: 0.5s;
	transform: scale(1); -webkit-transform: scale(1);  }
#request-popup .title {  display: block; width: 100%;  height: auto; margin:70px 0 50px 0; font-family: 'Museo Cyrl 500'; font-size: 21px; text-align: center; color: #333;  }
#request-popup .title .smaller {  font-family: 'Museo Cyrl 300'; font-size: 15px; color: #999;  }
#request-popup [type=text] {  display: block; position: relative; top: 0; left: 50%; width: 260px; height: auto; margin: 0 0 10px -150px; padding: 15px 20px; border: 4px solid #f7f7f7;  font-family: 'Museo Cyrl 300'; font-size: 18px;  }
#request-popup [type=text]:hover {  border-color: #8b8b8b;  }
#request-popup [type=text]:focus {  border-color: #000;  }
#request-popup .button {  display: block; position: relative; top: 0; left: 50%; width: 150px; height: auto; margin: 30px 0 0 -75px; padding: 15px 0; background: #ff2e2e; 
	font-family: 'Museo Cyrl 500'; font-size: 18px; color: #fff;
	border-radius:5px; -moz-border-radius:5px; -o-border-radius:5px; -webkit-border-radius:5px;  }
#request-popup .button.no {
	animation:no_anim 0.7s ease-in-out;
	-webkit-animation:no_anim 0.7s ease-in-out;
	}
@keyframes no_anim {
	20% {margin-left: -125px;}
	40% {margin-left: -25px;}
	60% {margin-left: -125px;}
	80% {margin-left: -25px;}
	100% {margin-left: -75px;}
	}
@-webkit-keyframes no_anim {
	20% {margin-left: -125px;}
	40% {margin-left: -25px;}
	60% {margin-left: -125px;}
	80% {margin-left: -25px;}
	100% {margin-left: -75px;}
	}
#request-popup [src*=close-icon] {  display: block; position: absolute; top: 20px; right: 20px; width: 30px; cursor:pointer;  }
@media screen and (max-width: 650px) {
	#request-popup {  width: calc(100% - 50px); height:calc(100% - 50px); min-height:375px; top: 25px; left: 25px; margin-left: 0;  }
	#request-popup.open {  top: 25px;  }
	#request-popup .title {  width: calc(100% - 100px); margin-left:50px;  }
	}
@media screen and (max-width: 450px) {
	#request-popup .title {  width: calc(100% - 50px); margin-left: 25px; font-size: 16px;  }
	#request-popup [type=text] {  width: calc(100% - 90px); left: 23px; margin-left: 0;  }
	}

.developer-sign {
	display: block;
	position: relative;
	top: 0px;
	left: 50%;
	width: 120px;
	margin: -30px 0 0 -60px;
	z-index: 1;
	font-family: 'Harmonia Sans Pro Cyr';
	font-size: 12px;
	color: #888;
	}
.developer-sign a {
	font-family: 'Harmonia Sans Pro Cyr';
	text-decoration: none;
	color: #fff;
	}

#lang {
	display: block;
	position: absolute;
	top: 47px;
	right: 120px;
	font-weight: 900;
	color: #ccc;
}
#lang span {
	cursor: pointer;
	opacity: 0.5;
	transition: 0.3s;
	-webkit-transition: 0.3s;
}
#lang span:hover,
#lang span.active {
	opacity: 1;
}